<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script src="../jquery/jquery3.6.js"></script>
<script src="../remote/js/websocketclient.js" charset="utf-8"></script>
<script src="chat.js"></script>
<link rel="stylesheet" href="css/PublicCSS.css">

<link rel="icon" href="/aaaa/favicon.ico">

<!--easyUI提示框-->
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.10.18/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.10.18/themes/icon.css">
<script type="text/javascript" src="../jquery/jquery-easyui-1.10.18/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-easyui-1.10.18/jquery.easyui.min.js"></script>
<!--统一URL-->
<script src="../URLJS/URL.js"></script>

<!-- import CSS -->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
&lt;!&ndash; import JavaScript &ndash;&gt;
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
&lt;!&ndash; import Vue before Element &ndash;&gt;
<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script>

    //websocketClient
    var client = null;
    var username = localStorage.getItem('username');
    var token = localStorage.getItem(username);
    console.log("传递的token")
    console.log(token)
    let url = HTTPURL + "/tokenController/check?accessToken=" + token +"&username="+username;
    console.log(url)
    $.ajax({
        //如果token有问题，不进行连接
        url:  url,
        type: 'get',
        success: function (res) {
            if(res === "success"){
                //启动远程桌面
                $.messager.show({
                    title: '登录成功',
                    msg: '欢迎您，' + username + '！',
                    showType: 'slide',
                    timeout: 1500,
                    style: {
                        right: '',
                        top: document.body.scrollTop + document.documentElement.scrollTop,
                        bottom: ''
                    }
                });
                startRemoteWin();

            }else {
                alert(this.url)
                alert("token错误.");
            }
        },
        error: function (result) {
            console.log(result)
            alert("异常："+result)
            console.log(username)
            console.log(token)
        }
    });

    // 代码转换
    function converDM(message, content) {
        // 判断message是否包含特定内容
        if (message.includes("```")) {
            // 将包含的内容的背景颜色改为黑色
            message = message.replace(/```(.*?)```/g, '<span style="background-color: black; color: white">$1</span>');
        }
        return message;
    }

    function startRemoteWin(options) {
        //修改title
        $('title').html("聊天中...");

        client = new WebsocketClient();

        //执行连接操作
        client.connect({
            onError: function (error) {
                //连接失败回调
                console.log("Error");
                console.log(error);

                //设置连接失败后的title
                $('title').html("米哈游崩溃了！！！！");

            },
            onConnect: function () {
                //连接成功回调
                console.log("连接成功回调\r\n");

                //设置成功连接后的title
                $('title').html("欢迎你原神玩家！！");
                // 初始化消息
                console.log(username);
                console.log(token)
                initMessage(username,token);
            },
            onClose: function () {
                //连接关闭回调
                console.log("\rconnection closed, now reconnect comtempt..");
                //alert("Websocket连接已关闭");
                startRemoteWin();
            },
            onData: function (data) {
                //收到数据时回调
                //console.log(data);
                //判断websocket的消息是二进制还是字符串
                if (typeof (data) === 'string') {
                    // 检验登录状态
                    if (ResultcheckedLoginState(data)) {
                        return;
                    }
                    console.log("字符串");
                    console.log(data)
                    //data = converDM(data)


                    let chatContent2 = $("#chatContent");
                    let newMessage = document.createElement("p");
                    newMessage.className = "robot";
                    newMessage.innerText = data;
                    chatContent2[0].appendChild(newMessage);
                    // 设置元素宽度为字体长度
                    console.log("字体宽度：")
                    //背景宽度
                    const chatDiv = document.getElementById("chatContent");
                    console.log("背景宽度2："+chatDiv.offsetWidth)
                    if (parseInt((24*data.length)) > parseInt(chatDiv.offsetWidth)){
                        // 字体过多宽度大于背景最大宽度为背景
                        console.log("字体过多宽度大于背景"+data.length)
                        len = parseInt(chatDiv.offsetWidth)-parseInt(10);
                    }else{
                        console.log("机器人背景宽度："+data.length)
                        len = parseInt(24)*parseInt(data.length);
                        console.log(len)
                    }
                    newMessage.style.width = len +"px";
                    newMessage.style.marginLeft =0+"%";
                    //跳转到chatContent窗口最底部
                    //chatContent2.scrollTop(chatContent2[0].scrollHeight);
                    toButton();
                    console.log("返回字符串")
                } else {
                }
            }
        },token,username);
    }
    // 判断显卡
    function checkGraphicsCard() {
         const canvas = document.createElement('canvas'),
            gl = canvas.getContext('experimental-webgl'),
            debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
        const info = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
       // 判断info是否包含NVDIA 判断是否是独显 (ANGLE (AMD, AMD Radeon(TM) Graphics (0x00001636) Direct3D11 vs_5_0 ps_5_0, D3D11))
        console.log(info)
        if (info.includes("NVIDIA")) {
            alert("NVIDIA");
            target("../XNTest/volumeshader_bm.html");
        }else if (info.includes("AMD")) {
            alert("AMD");
            target("../XNTest/volumeshader_bm.html");
        }else{
            alert("未知显卡！！！！不建议测试")
        }
        return info;
    }

    function target(url){
        if(url.length > 1){
            window.location.href = url;
        }else{
            window.location.href = '#';
        }

    }
 // 滑动到底部
    function toButton(){
        // windows页面滑动到最底部

        $(document).ready(function() {
            // 获取浏览器窗口的高度
            let windowHeight = $(window).height();

            // 将页面下滑到最底部
            $('html, body').animate({
                scrollTop: $(document).height() - windowHeight
            }, 1000); // 1000为动画的持续时间，以毫秒为单位
        });
    }

    // 发送消息
    function sendMessage() {
          let message = $('#message').val();
        let chatContent2 = $("#chatContent");
        let text = {txt:""+message+"",username:""+username+"",token:""+token+"",getUser:""+"robot"+""};
        if (message.trim() !== "") {
            // 创建一个span元素
            let newMessage = document.createElement("p");
            newMessage.className = "my";
            newMessage.innerText = message;
            chatContent2[0].appendChild(newMessage);
            //发送消息给后端
            client.sendClientData(text);
            // 设置元素宽度为字体长度
            console.log("字体宽度：")
            //背景宽度
            const chatDiv = document.getElementById("chatContent");
            console.log("背景宽度2："+chatDiv.offsetWidth)
            console.log(message.length)
            if ((24*message.length) > chatDiv.offsetWidth){
                // 字体过多宽度大于背景最大宽度为背景
                console.log("字体过多宽度大于背景")
                len = chatDiv.offsetWidth;
            }else{

                console.log("自己背景宽度："+message.length)
                len = parseInt(24)*parseInt(message.length);
                console.log(len)
            }
            newMessage.style.width = len +"px";
            console.log("1t"+len)
            let mag = 0;
            console.log(len)
            console.log(chatDiv.offsetWidth)
            console.log((parseInt(chatDiv.offsetWidth)/parseInt(len))*parseInt(100))
            // 如果是最宽那么表示文字不移动否则向右移动
            if(len == chatDiv.offsetWidth){
                console.log("进入条件偏移量为0")
                mag = 0;
            }else {
                console.log((len == chatDiv.offsetWidth)+"没有进入条件偏移量："+(parseInt(chatDiv.offsetWidth)/parseInt(len))*parseInt(100))
                mag = (parseInt(chatDiv.offsetWidth)/parseInt(len))*parseInt(100)
            }
            newMessage.style.marginLeft = "auto";
            //跳转到chatContent窗口最底部
           // chatContent2.scrollTop(chatContent2[0].scrollHeight);
            toButton();
        }else{
            //alert("请输入内容")
        }
        // 清空输入框
        $("#message").val("");
        // 按钮倒计时

        timeloading(3);
    }

    // 定时器随机时间调用 checkedLoginState方法
    function randomTime(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    function startTimer() {
        var minTime = 3000; // 最小时间间隔（毫秒）
        var maxTime = 10000; // 最大时间间隔（毫秒）
        var randomInterval = randomTime(minTime, maxTime);

        setTimeout(function() {
            checkedLoginState();
            startTimer(); // 递归调用，实现无限循环
        }, randomInterval);
    }
    startTimer();
    function checkedLoginState(){
        let text = {txt:""+"checkedLoginState"+"",username:""+username+"",token:""+token+"",getUser:""+"system"+""};
        client.sendClientData(text);
    }
    function ResultcheckedLoginState(message){
        if (message == (username+"checkedLoginStateTrue")){
            //console.log("检验登录成功")
            return true;
        }else if (message == (username+"checkedLoginStateFalse")){
            alert("登录状态异常，请重新登录！！！")
            localStorage.setItem("username", "");
            localStorage.setItem("token", "");
            return true;
        }
    }

    // 按下sendButton 清空消息
    function timeloading(time) {
        time = parseInt(time) - 1;
        if (time < 0) {
            // 把ID为sendButton的内容改为1
            $('#sendButton').html("<input style=\"height: 100%; width: 100%;\" type=\"button\" onclick=\"sendMessage()\" id=\"btn\" value=\"发送\">");
        } else {
            let btn = $('#btn');
            btn.val(time+1)
            btn.css("background-color", "red");
            btn.css("color", "white");
            btn.css("border", "1px solid gray");
            setTimeout(timeloading, 1000, time);
        }
    }
</script>

<body>
<div id="app">
<style>
    .chat-content {
        height: 30%;
        overflow-y: scroll;
        border: 1px solid #ccc;
        padding: 10px;
    }

</style>
    <!--消息体-->
    <div class="chat-content" id="chatContent">
    </div>
    <div style="display: inline-block;height: 50px; width: 90%;">
        <textarea style="height: 100%; width: 100%;" id="message" placeholder="良言一句三冬暖，恶语伤人六月寒。这里输入你的聊天内容"></textarea>
    </div>
    <div style="display: inline-block;height: 50px; width: 9%; vertical-align: top;" id="sendButton">
        <input style="height: 100%; width: 100%;" type="button" onclick="sendMessage()" id="btn" value="发送">
    </div>
    <!--<div class="chatTxt" style="border: 2px solid red;width: 40%;height: 500px">
    <form>
        <div class="my"><span  type="button" >我发送的内容</span></div>
        <div class="robot"><span type="button" >文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</span></div>
        <textarea id="message" style="height: 50px;width:90%;resize: none" name="username" id="username" placeholder="善言结善缘，恶语伤人心。这里输入你的聊天内容" rows="2"></textarea>
        <input type="button" onclick="sendMessage()" id="btn" value="发送">
    </form>
</div>-->
</div>
<button onclick="checkGraphicsCard()" style="width: 100px;height: 50px; background-color: red;color: purple; border: blue 10px double;  position: fixed; left: 10%; top: 10%;">
    性能测试
</button>
</body>
</html>
